<?php
use app\models\Mall;
use app\widgets\MallMBottomToolbarWidget;
use yii\helpers\Url;

$web = Url::base();
$site_name = \app\models\Mall::getCurrentInstitutionSiteName();
$integral_unit = \app\models\Mall::getCurrentInstitutionIntegralUnit();
$institution_code = Mall::getCurrentInstitutionCode();
$this->title = $goodsListTitle ? $goodsListTitle : $site_name . '-商品列表';
?>


<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/goods-list.css"/>
<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/cross-title.css"/>
<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/animate.min.css"/>

<script src="<?= $web ?>/js/jquery.md5.js"></script>
<script type="application/javascript">
    var currentSort =<?=$sort?>;
    var currentCv =<?=$cv?>;
    function setSortType(sort) {
        var href = window.location.href;
        href = setUrlParam(href, 'sort', sort);
        href = setUrlParam(href, 'page', 1);
        window.location.href = href;
    }
    function click_default_order() {
        if (currentSort != 0) {
            setSortType(0);
        }
    }
    function click_new_order() {
        if (currentSort != 3) {
            setSortType(3);
        }
    }
    function click_price_order() {
        var sort = 1;
        if (currentSort == 1) {
            sort = 2;
        }
        setSortType(sort);
    }
    //新方式------
//    mySessionStorage=false;
    var isLoading=false;
    //获取内容
    function getGoodsList(){

        if(isLoading){return;}
        isLoading=true;
        //获取url参数
        var url= 'get-goods-list-handle?'+getUriPmStr();
        url = setUrlParam(url, 't', jst);
        if(parseInt(page)>=parseInt(maxPage)){
            return;
        }
        url = setUrlParam(url, 'page', parseInt(page)+1);
        $('.loading').show();
        $.ajax({
            async: true,
            type: "GET",
            dataType: "json",
            url: url,
            data: {},
            success: function (msg) {
                var data=msg.data;
                page=parseInt(data.page);
                if(page==0){
                    $('.page-prompt-5').show();
                    $('.loading').hide();
                }
                maxPage=parseInt(data.maxPage);
//               debugger;
                //存储到本地
                if(mySessionStorage) {
                    var scrollTop = mySessionStorage.getItem(storage_pre + 'scrollTop');
                    var content_1='<div>'+data.content_1+'</div>';
                    var content_2='<div>'+data.content_2+'</div>';
                    if (scrollTop) {
                        //认为有历史数据
                        var old_content_1=mySessionStorage.getItem(storage_pre + 'content_1');
                        var old_content_2=mySessionStorage.getItem(storage_pre + 'content_2');
                        content_1=old_content_1+content_1;
                        content_2=old_content_2+content_2;
                    }
                    mySessionStorage.setItem(storage_pre + 'content_1', content_1);
                    mySessionStorage.setItem(storage_pre + 'content_2', content_2);
                    mySessionStorage.setItem(storage_pre + 'page', page);
                    mySessionStorage.setItem(storage_pre + 'maxPage', maxPage);
                }
                //填充到页面
                addDom($('.content-1'),data.content_1);
                addDom($('.content-2 .goods-grid-frame'),data.content_2);
                isLoading=false;
                $('.loading').hide();
            }
        });
    }
    function addDom(target,html){
        var dom = document.createElement("DIV");
        dom.innerHTML=html;
        target.get(0).appendChild(dom);
        lazy_goods_img();
    }
    function lazy_goods_img(){
//        return;
        //图片延时加载
        $(".content-1 img:not(.lazyed),.content-2 img:not(.lazyed)").lazyload({
            effect: "fadeIn",
            skip_invisible:false,
            placeholder:"<?= $web ?>/images/mall-m/goods-list-loading.jpg"
        }).addClass('lazyed');

    }
    var page=0;
    var maxPage=1;
    var storage_pre='goods_list_session_'+$.md5(window.location.href)+'_';
    function clearStorage(){
        for (var i=0; i  <  mySessionStorage.length; i++){
            var key = mySessionStorage.key(i);
//            debugger;
            if(key.indexOf('goods_list_session_')>=0){
                if(key.indexOf(storage_pre)==-1){
                    mySessionStorage.removeItem(key);
                    i--;
                }
            }

        }
    }
    $(function($) {
        clearStorage();
        if (currentCv == 1) {
            $('.arrangement-1').hide();
            $('.content-1').hide();

            $('.arrangement-2').show();
            $('.content-2').show();
        }
        var isIniLoad=true;
        //检查是否有历史数据
        if (mySessionStorage) {
            var scrollTop = mySessionStorage.getItem(storage_pre + 'scrollTop');
            if (scrollTop) {//认为有历史数据
                $('.loading').show();
                addDom($('.content-1'), mySessionStorage.getItem(storage_pre + 'content_1'));
                addDom($('.content-2 .goods-grid-frame'), mySessionStorage.getItem(storage_pre + 'content_2'));
                $(document).scrollTop(scrollTop);
                page = mySessionStorage.getItem(storage_pre + 'page');
                maxPage = mySessionStorage.getItem(storage_pre + 'maxPage');
                isIniLoad=false;
                $('.loading').hide();
            }
        }
        if(isIniLoad){
            getGoodsList();
        }
        //列表页切换
        $('#arrange').click(function () {
            $('.arrangement-1').toggle();
            $('.content-1').toggle();

            $('.arrangement-2').toggle();
            $('.content-2').toggle();

            //记录分类code
            if (mySessionStorage) {
                var arrangement_status = 0;
                if ($('.arrangement-2').is(':visible')) {
                    arrangement_status = 1;//网格列表
                }
                mySessionStorage.goods_list_arrangement_status = arrangement_status;
            }
        });

        if (mySessionStorage) {
            var arrangement_status = mySessionStorage.goods_list_arrangement_status;
            if (arrangement_status) {
                if (arrangement_status == 1) {
                    $('.arrangement-1').hide();
                    $('.content-1').hide();

                    $('.arrangement-2').show();
                    $('.content-2').show();
                }

            }
        }

        //滚动事件
        $(document).scroll(function () {
            var wHeight=$(window).height();
            var scrollTop = $(document).scrollTop();
            var dHeight = $(document).height();
            //记录滚动条位置
            if(mySessionStorage) {
                mySessionStorage.setItem(storage_pre +'scrollTop',scrollTop);
            }
            if ((dHeight-scrollTop-wHeight) < 800) {
                //加载下一页数据
                getGoodsList();
            }

        });
        //显示积分筛选条件
        $('#txt_historyIntegral').html(getHistoryIntegral());
    });


    hrefGoodsListByIntegral =function(integralFrom,integralTo){
        if(isNaN(integralFrom)){
            integralFrom=0;
        }
        if(isNaN(integralTo)){
            integralTo=0;
        }
        var url=window.location.href;
        url=setUrlParam(url,'integralFrom',integralFrom);
        url=setUrlParam(url,'integralTo',integralTo);
        if(integralFrom==-1){
            url=removeUrlParam(url,'integralFrom');
        }
        if(integralTo==-1){
            url=removeUrlParam(url,'integralTo');
        }
        if(integralFrom==-1 && integralTo==-1){
            url=removeUrlParam(url,'sort');
        }
        window.location.href=url;
    };

    getHistoryIntegral=function(){
        var url=window.location.href;
        var integralFrom=getUrlParamValue(url,'integralFrom');
        var integralTo=getUrlParamValue(url,'integralTo');
        if(integralFrom){
            if(integralTo){
                return '（'+integralFrom+'-'+integralTo+'）';
            }else {
                return '（'+integralFrom+'以上'+'）';
            }
        }else{
            return '';
        }
    };
</script>
<style type="text/css">
    .back-top {
        background-image: url('<?= $web ?>/images/mall-m/index-icon-top.png');
    }
</style>

<div class="main">
    <div class="header">
        <a class="search" href="<?= Url::to(['mall-m/search', 'institution_code' =>$institution_code]) ?>">
            <img src="<?= $web ?>/images/mall-m/index-icon-search.png">
            <label>搜索商城商品</label>
        </a>
    </div>
    <div class="list">
        <div class="list-ul">
            <!--toggle order-->
            <div id="order_default" class="list-li list-cur order_btn" onclick="click_default_order()">默认</div>
            <div class="f-l long-string"></div>
            <!--            <div id="sales" class="list-li">销量</div>-->
            <!--            <div class="f-l long-string"></div>-->
            <div id="order_new" class="list-li order_btn" onclick="click_new_order()">最新</div>
            <div class="f-l long-string"></div>
            <div id="order_price" class="cost list-li order_btn" onclick="click_price_order()">价格
                <div class="arrow">
                    <img class="normal" src="<?= $web ?>/images/mall-m/goods-list-sort-normal.png"/>
                    <img class="up" style="display: none;" src="<?= $web ?>/images/mall-m/goods-list-sort-up.png"/>
                    <img class="down" style="display: none;" src="<?= $web ?>/images/mall-m/goods-list-sort-down.png"/>
                </div>
            </div>
            <!--toggle list-->
            <div class="f-l long-string"></div>
            <div  class="list-li order_btn screen" >筛选<img src="<?= $web ?>/images/mall-m/screen-icon.png"></div>
            <div class="f-l long-string"></div>
            <div id="arrange" class="list-li arrange">
                <img class="arrangement-1" src="<?= $web ?>/images/mall-m/arrangement-1.png"/>
                <img class="arrangement-2" src="<?= $web ?>/images/mall-m/arrangement-2.png" style="display: none;"/>
            </div>
        </div>
    </div>
    <div class="screen-window">
        <div class="screen-content">
            <div class="section">
                <p class="section-title">积分区间 <span id="txt_historyIntegral"></span></p>
                <div class="section-nav">
                    <ul>
                        <a href="javascript:hrefGoodsListByIntegral(0,50)">
                            <li>0-50</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(50,100)">
                            <li>50-100</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(100,200)">
                            <li>100-200</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(200,300)">
                            <li>200-300</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(300,400)">
                            <li >300-400</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(400,500)">
                            <li>400-500</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(500,600)">
                            <li>500-600</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(600,700)">
                            <li>600-700</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(700,800)">
                            <li >700-800</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(800,900)">
                            <li>800-900</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(900,1000)">
                            <li>900-1000</li>
                        </a>
                        <a href="javascript:hrefGoodsListByIntegral(1000,-1)">
                            <li>1000以上</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="hunt">
                <input class="minimum" type="text" value="" placeholder="最低积分" />
                <div class="hunt-line"></div>
                <input class="highest" type="text" value="" placeholder="最高积分" />
            </div>
            <div class="screen-btn">
                <a class="colse-btn" href="javascript:hrefGoodsListByIntegral(-1,-1)">重置</a>
                <a class="confirm-btn" href="javascript:hrefGoodsListByIntegral($('.minimum').val(),$('.highest').val())">确定</a>
            </div>
        </div>
        <div class="close-window">
            <img  src="<?= $web ?>/images/mall-m/close-screen-window.png"/>
        </div>

    </div>
    <div class="screen-shade"></div>
    <script type="text/javascript">
        $(function() {

            $(".screen").click(function() {
                $(".screen-window").addClass("animated fadeInRight");
                $(".screen-window,.screen-shade").css("display","block");
                setTimeout(function(){
                    $('.screen-window').removeClass('animated fadeInRight');
                }, 1000);
                $("body,html").css({height:"100%",overflow:"hidden"});
            });

            $(".screen-shade,.close-window").click(function() {
                $(".screen-window").addClass("animated fadeOutRight");
                setTimeout(function(){
                    $('.screen-window').removeClass('animated fadeOutRight');
                    $(".screen-window,.screen-shade").css("display","none");
                }, 500);
                $("body,html").css({overflow:"auto",height:"auto"});
            });

            $(".section-nav ul li").click(function(){
                $(this).css("background","#e5e5e5");
                $(this).siblings().css("background","#f2f2f2")
            })

        });
    </script>

        <div class="content-1">

        </div>
        <div class="content-2" style="display: none;">
            <div class="goods-grid-frame">

            </div>
        </div>
        
    
        <div class="page-prompt-5" style="display: none;">
            <img class="page-prompt" src="<?= $web ?>/images/mall-m/page-prompt-6.jpg"/>
            <p class="title">抱歉，没有找到符合条件的商品</p>
        </div>
         <div class="loading" style="display: none;"><p>正在加载...</p></div>

    <div class="tab-frame-margin-bottom"></div>
    <?=MallMBottomToolbarWidget::widget(['actionName'=>''])?>
    <div class="cl-fl"></div>
    <div class="back-top"></div>
    <script type="text/javascript">

        $(function () {
            $(document).scroll(function () {
                var scrollTop = $(document).scrollTop();
                if (scrollTop > 500) {
                    $('.back-top').show(500);
                } else {
                    $('.back-top').hide(500);
                }
            });

            $('.back-top').click(function () {
                $('body,html').animate({scrollTop: 0}, 200);
            });

            //设置排序显示
            $('.order_btn').removeClass('list-cur');
            if (currentSort == 0) {
                $('#order_default').addClass('list-cur');
            }
            if (currentSort == 3) {
                $('#order_new').addClass('list-cur');
            }
            //order_price
            if (currentSort == 1) {
                $('#order_price').addClass('list-cur');
                $('#order_price').find('.arrow > img').hide();
                $('#order_price').find('.arrow > .up').show();
            }
            if (currentSort == 2) {
                $('#order_price').addClass('list-cur');
                $('#order_price').find('.arrow > img').hide();
                $('#order_price').find('.arrow > .down').show();
            }



        });

    </script>
</div>
